const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const MiniCssExtractPlugin=require('mini-css-extract-plugin');
const {CleanWebpackPlugin}=require('clean-webpack-plugin')

function getHtmlWebpackPlugin(name){
    return new HtmlWebpackPlugin({
        chunks:[name], 
        template:`./src/${name}.html`,
        filename:`./${name}.html`
    })
}

module.exports={
    mode:'production',
    entry:{
        login:'./src/js/login.js',
        register:'./src/js/register.js',
        main:'./src/js/main.js',
        personal:'./src/js/personal.js',
        default:'./src/js/default.js',
        stushow:'./src/js/stushow.js',
        update:'./src/js/update.js',
        stuadd:'./src/js/stuadd.js',
        banner:'./src/js/banner.js',
        bannershow:'./src/js/bannershow.js',
        classhow:'./src/js/classhow.js',
        clasadd:'./src/js/clasadd.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'./js/[name].js'
    },
    plugins:[
        getHtmlWebpackPlugin('login'),
        getHtmlWebpackPlugin('register'),
        getHtmlWebpackPlugin('main'),
        getHtmlWebpackPlugin('personal'),
        getHtmlWebpackPlugin('default'),
        getHtmlWebpackPlugin('stushow'),
        getHtmlWebpackPlugin('update'),
        getHtmlWebpackPlugin('stuadd'),
        getHtmlWebpackPlugin('banner'),
        getHtmlWebpackPlugin('bannershow'),
        getHtmlWebpackPlugin('classhow'),
        getHtmlWebpackPlugin('clasadd'),
        // 自动清除dist
        new CleanWebpackPlugin(),
        // 外部样式专用地址
        new MiniCssExtractPlugin({
            filename:'./css/[name].css'
        })

    ],
    module:{
        rules:[
            // css
            {
                test:/\.css$/i,
                use:[MiniCssExtractPlugin.loader,'css-loader']
            },
            // sass
            {
                test:/\.scss$/i,
                use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']
            },
            //配置css中的图、背景图等等
            {
                test:/\.(png|jpg|jpeg|gif)$/i,
                use:[{
                    loader:'url-loader',
                    options:{
                        //如果是8KB以下的图则自动转为base64字符串,减少请求个数，优化性能
                        limit:1024*8,
                        //图片打包的位置
                        outputPath:'./images',
                        //解决新版本冲突问题
                        esModule:false
                    }
                }]
            },
            //html下img标签中的图
            {
                test:/\.html$/i,
                use:['html-withimg-loader']
            }
        ]
    },
    devServer:{
        port:8888,
        open:true,
        hot:true
    }
}